<template>
  <e-table
    ref="eTable"
    @getList="handleGetList"
    :tableData="tableData"
    :columns="columns"
    :loading="loading"
    :total="total"
  >
    <el-table-column label="方案周期" width="120" align="center" slot="cycle">
      <template slot-scope="scope">{{ showCycleWord(scope.row.moralityCycleId) }}</template>
    </el-table-column>
    <el-table-column label="党支部环节" width="100" align="center" slot="party">
      <template slot-scope="scope">{{ scope.row.branchStep === 0 ? '否' : '是' }}</template>
    </el-table-column>
    <el-table-column label="状态" width="80" align="center" slot="state">
      <template slot-scope="scope">
        <el-tag :type="judgeType(scope.row.state)">{{ judgeStae(scope.row.state) }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" slot="action" align="center" width="120">
      <template slot-scope="scope">
        <a @click="handleEdit(true, scope.row)">编辑</a>
        <el-divider direction="vertical" />
        <a class="red" @click="handleDelete(scope.row)">删除</a>
      </template>
    </el-table-column>
  </e-table>
</template>

<script>
import { planPage, planDelete, cycleAll } from '@/api/morality'
import { openNotification, judgeEvalState, judgeType } from '@/utils/util'
export default {
  data() {
    return {
      tableData: [],
      loading: false,
      total: 1,
      queryParam: {
        pageSize: 10,
        pageNo: 1
      },
      columns: [
        {
          label: '考评方案名称',
          prop: 'moralityPlanName'
        },
        { slot: 'cycle' },
        { slot: 'party' },
        { slot: 'state' },
        { slot: 'action' }
      ],
      selectData: []
    }
  },
  mounted() {
    this.handleGetList()
    cycleAll().then(res => {
      console.log('cycleAll res', res)
      this.selectData = res.data
    })
  },
  methods: {
    judgeType(num) {
      return judgeType(num)
    },
    judgeStae(num) {
      return judgeEvalState(num)
    },
    showCycleWord(id) {
      let str = ''
      this.selectData.map(v => {
        if (v.moralityCycleId === id) {
          str = v.moralityCycleName
        }
      })
      return str
    },
    handleEdit(bool, row) {
      this.$router.push({
        name: 'moralityCreateScheme',
        params: { row, type: 'edit' }
      })
      // this.$emit('edit', bool, obj)
    },
    handleDelete(row) {
      console.log('row', row)
      const _this = this
      this.$confirm({
        title: '删除操作',
        content: `您确定删除[${row.moralityPlanName}]这条记录吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        centered: true,
        async onOk() {
          // 调用删除接口，刷新表格数据
          const res = await planDelete(row.moralityPlanId, {})
          openNotification('success', '删除成功')
          const index = _this.tableData.findIndex(v => v.moralityPlanId === row.moralityPlanId)
          _this.tableData.splice(index, 1)
        }
      })
    },
    async handleGetList(param = {}) {
      this.loading = true
      this.queryParam = Object.assign(this.queryParam, param)
      const res = await planPage(this.queryParam)

      if (res && res.data.records.length > 0) {
        const {
          state,
          data: { records, total }
        } = res
        this.tableData = records
        this.total = total
      } else {
        this.tableData = []
        this.total = 1
      }
      this.loading = false
    }
  }
}
</script>
